<!--
 * @Author: C.
 * @Date: 2024-07-30 13:43:19
-->
<template>
  <div
    ref="dragBoxRef"
    :style="boxStyle"
    @mousedown="dragStart"
    class="drag-box"
  >
    <div>{{ boxMsg.x }},{{ boxMsg.y }},{{ boxMsg.w }},{{ boxMsg.h }}</div>
    <slot></slot>
    <div
      :class="['handle', item.action]"
      :style="{ cursor: item.cursor }"
      v-for="item in handlers"
      :key="item.action"
      @mousedown="resizeStart(item.action)"
    ></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, watch, inject } from "vue";
import type { CSSProperties } from "vue";
import { BasicProps } from "./props";
import { useDragBox } from "./hooks/useDragBox";
import { useParent } from "./hooks/useParent";
import { useMove } from "./hooks/useMove";
import { Fn } from "@/global";
import { handlers } from "./static/handlers";

const props = defineProps(BasicProps);
const boxMsg = reactive({
  minH: 50,
  minW: 50,
  maxH: 400,
  maxW: 400,
  ...props
});
const propsRef = computed(() => {
  return {
    ...props
  };
});
const dragBoxRef = ref<HTMLElement>();
const { parentPosition } = useParent(dragBoxRef);
const updateBoxStore = inject<Fn>("updateBoxStore");
const hideMarkLine = inject<Fn>("hideMarkLine");
const { setX, setY, setH, setW } = useMove(propsRef, {
  parentPosition,
  boxMsg
});
const { dragStart, resizeStart, dragStyle } = useDragBox(propsRef, {
  parentPosition,
  boxMsg,
  setX,
  setY,
  setH,
  setW,
  updateBoxStore,
  hideMarkLine
});
const boxStyle = computed<CSSProperties>(() => {
  return Object.assign({}, dragStyle.value);
});
</script>

<style lang="scss" scoped>
@import "./styles/handle.scss";
.drag-box {
  position: absolute;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
</style>
